<!DOCTYPE HTML>
<html>
<!-- 使用 css多列屬性將相應的属性进行添加  属性是动态的 就是为了全部填满-->
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>CSS3瀑布布局</title>
		<style>
			.container {
				column-width: 160px;
				column-gap: 30px;
			}
			
			div:not(.container) {
				border-radius: 5px;
				border-radius: 5px;
				background: #90EE90;
				border: : #CCC 1px solid;
				display: inline-block;
				width: 157px;
				position: relative;
				margin: 2px;
			}
			
			.title {
				line-height: 80px;
				font-size: 18px;
				color: #999;
				text-align: center;
				font-family: "Microsoft YaHei";
			}
		</style>
	</head>

	<body>
		<section>
			<div class="container">
				<div style="height:80px" class="title">纯CSS3瀑布布局</div>
				<div style="height:260px">1</div>
				<div style="height:65px">2</div>
				<div style="height:120px">3</div>
				<div style="height:145px">4</div>
				<div style="height:90px">5</div>
				<div style="height:145px">6</div>
				<div style="height:160px">7</div>
				<div style="height:65px">8</div>
				<div style="height:230px">9</div>
				<div style="height:140px">10</div>
				<div style="height:85px">11</div>
				<div style="height:20px">12</div>
				<div style="height:145px">13</div>
				<div style="height:50px">14</div>
				<div style="height:65px">15</div>
				<div style="height:230px">16</div>
				<div style="height:140px">17</div>
				<div style="height:85px">18</div>
				<div style="height:20px">19</div>
				<div style="height:145px">20</div>
				<div style="height:50px">21</div>
				<div style="height:145px">22</div>
				<div style="height:160px">23</div>
				<div style="height:240px">24</div>
			</div>
		</section>
	</body>

</html>